<div class="cil__base-block  ">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />
</div>

<div class="cil_edit_rule">
  <nz-table class="cil_edit_table">
    <thead class="cil-thead">
      <tr>
        <th>{{ '规则编号' | translate }}</th>
        <th>{{ '规则属性' | translate }}</th>
        <th>{{ '规则描述' | translate }}</th>
        <th>{{ '阈值描述' | translate }}</th>
        <th>{{ '阈值' | translate }}</th>
        <th>{{ '分值' | translate }}</th>
      </tr>
    </thead>
    <tbody class="cil-tbody">
      <tr *ngFor="let item of riskRuleControlArray; let i = index" [attr.id]="item.id">
        <td class="first-td" style="width:100px">
          <form nz-form [formGroup]="ruleForm">
            <nz-form-control style="width: 100%;">
              <nz-input-group style="width: 100%;">
                <input [formControlName]="item.ruleID" style="width: 100%;" readonly class="readonly" />
              </nz-input-group>
            </nz-form-control>
          </form>
        </td>
        <td class="first-td">
          <form nz-form [formGroup]="ruleForm">
            <nz-form-control style="width: 100%;">
              <nz-input-group style="width: 100%;">
                <input [formControlName]="item.ruleType" style="width: 100%;" readonly class="readonly" />
              </nz-input-group>
            </nz-form-control>
          </form>
        </td>
        <td class="special-td">
          <form nz-form [formGroup]="ruleForm">
            <nz-form-control style="width: 100%;">
              <nz-input-group style="width: 100%;">
                <input [formControlName]="item.ruleName" style="width: 100%;" readonly class="readonly" />
              </nz-input-group>
            </nz-form-control>
          </form>
        </td>
        <td class="special-two-td">
          <form nz-form [formGroup]="ruleForm">
            <nz-form-control style="width: 100%;">
              <nz-input-group style="width: 100%;">
                <input [formControlName]="item.thresholdDesc" style="width: 100%;" readonly class="readonly" />
              </nz-input-group>
            </nz-form-control>
          </form>
        </td>
        <td class="first-td">
          <form nz-form [formGroup]="ruleForm">
            <nz-form-control class="field-contronl" style="width: 100%;">
              <nz-input-group style="width: 100%;">
                <input [formControlName]="item.threshold" maxlength="12" style="width: 100%;" />
              </nz-input-group>
              <nz-form-explain
                class="error"
                *ngIf="ruleForm.get(item.threshold).dirty && ruleForm.get(item.threshold).errors"
              >
                <ng-container
                  >{{ 'VALIDATION.PATTERN.NUMBER_ONLY' | i18nParams: { name: 'GENERAL.INFO.RULE_THRE' } }}
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </form>
        </td>
        <td class="first-td">
          <form nz-form [formGroup]="ruleForm">
            <nz-form-control class="field-contronl" style="width: 100%;">
              <nz-input-group style="width: 100%;">
                <input [formControlName]="item.score" maxlength="3" style="width: 100%;" />
              </nz-input-group>
              <nz-form-explain class="error" *ngIf="ruleForm.get(item.score).dirty && ruleForm.get(item.score).errors">
                <ng-container
                  >{{ 'VALIDATION.PATTERN.NUMBER_ONLY' | i18nParams: { name: 'GENERAL.INFO.SCORE' } }}
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </form>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>
